<!DOCTYPE HTML>
<html>
<head>
    <title>Canvas tutorial</title>

    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
	<script type="text/javascript" src="../common/commmonUtil.js"></script>
</head>
 <body onload="draw();">
 <div id="position">
   <canvas id="canvas"></canvas>
  </div>
     <script type="text/javascript">
	 	var canvasWidth = 600;
		var canvasHeight = 600;
		function draw(){
			var canvas = document.getElementById("canvas");
			if(canvas.getContext){
				canvas.setAttribute('width', canvasWidth);
				canvas.setAttribute('height', canvasHeight);
				ctx = canvas.getContext("2d");
				animateTaichi();
			} else {
				alert("not surport canvas");
			}
		}
		var ctx;
		function animateTaichi(){
			setInterval(rotateTaichi, 20);
		}
		function rotateTaichi(){
			ctx.clearRect(0, 0, canvasWidth, canvasHeight);
			ctx.translate(canvasWidth/2, canvasHeight/2);
			ctx.rotate(1*Math.PI / 180);
			ctx.translate(-canvasWidth/2, -canvasHeight/2);
			taichi(ctx);
		}
		function arc(ctx,fillStyle, x,y,radius , startA, endA, isAntiClock){
			ctx.beginPath();
			ctx.arc(x,y,radius ,startA,endA, isAntiClock);
			ctx.fillStyle=fillStyle;
			ctx.closePath();
			ctx.fill();
		}
		function drawFish(ctx, radius){
			var centerX = canvasWidth/2;
			var centerY = canvasHeight/2;
			var grdWhite=ctx.createLinearGradient(canvasWidth,canvasHeight,0,0);
			grdWhite.addColorStop(0,"rgba(255,255,255,1)");
			grdWhite.addColorStop(1,"rgba(200,200,200, 1)");
			var grdBlack=ctx.createLinearGradient(0,0,canvasWidth,canvasHeight);
			grdBlack.addColorStop(0,"rgba(0,0,0,1)");
			grdBlack.addColorStop(1,"rgba(200,200,200, 1)");
			arc(ctx, grdWhite, centerX,centerY,            radius,    		0.5*Math.PI,1.5*Math.PI, true);
			arc(ctx, grdBlack, centerX,centerY,            radius,    		0.5*Math.PI,1.5*Math.PI, false);
			arc(ctx, grdWhite, centerX,centerY - radius/2, radius/2,  		0*Math.PI,2*Math.PI, false);
			arc(ctx, grdBlack, centerX,centerY + radius/2, radius/2,  		0*Math.PI,2*Math.PI, true);
			arc(ctx, grdWhite, centerX,centerY+radius/2,   radius/16,       0*Math.PI, 2*Math.PI, true);
			arc(ctx, grdBlack, centerX,centerY-radius/2,   radius/16,       0*Math.PI, 2*Math.PI, false);
		}
		var count=1;
		function taichi(ctx){
			var radius  = 120;			
			drawFish(ctx, radius);
			for(var i = 1; i < 10; i++){
				SatelliteTaichi(ctx, i/10, radius/(i+1));
			}
		}
		function SatelliteTaichi(ctx, speed, radius){
			ctx.save();
			ctx.translate(canvasWidth/2, canvasHeight/2);
			ctx.rotate(speed*count*Math.PI / 180);
			ctx.translate(-canvasWidth/2, -canvasHeight/2);
			ctx.translate(canvasWidth/4 + radius/10, 0);
			count++;
			drawFish(ctx, radius);
			ctx.restore();
		}
	</script>
 </body>
</html>